@include base(contact) {
    $header-font-size: (
        default: 24px,
        md: 32px
    );
    $header-item-font-size: (
        default: 14px,
        md: 16px
    );
    $item-time: (
        default: 14px,
        lg: 20px
    );
    $item-title: (
        default: 24px,
        lg: 36px
    );
    $item-intro: (
        default: 14px,
        lg: 20px
    );
    
    &-map {
        margin-top: 50px;
        margin-bottom: 50px;
            
        @include adaptive(md) {
            & {
                height: 360px;
            }
        }
        
        .header {
            font-weight: bold;
            margin-bottom: 1em;
            color: #fff;
            @include responsive($header-font-size, font-size);
            
            &::before {
                content: '\20';
                display: block;
                width: 30px;
                height: 5px;
                background-color: #fff;
                margin: 0 0 8px;
            }
        }
        
        .info {
            background: url('~assets/images/bg-8.png') repeat-y center;
            background-size: 100% auto;
            padding: 25px;
            
            @include adaptive(md) {
                & {
                    float: left;
                    height: 360px;
                    width: 35%;
                    padding: 40px;
                }
            }
        }
        
        .items {
            .item {
                color: #fff;
                background-repeat: no-repeat;
                background-position: center left;
                background-size: 16px 16px;
                padding-left: 20px;
                margin: 8px 0;
                @include responsive($header-item-font-size, font-size);
                
                &-address {
                    background-image: url('~assets/images/icon-contact-address.png');
                }
                
                &-telephone {
                    background-image: url('~assets/images/icon-contact-telephone.png');
                }
                
                &-email {
                    background-image: url('~assets/images/icon-contact-email.png');
                }
                
                &-qq {
                    background-image: url('~assets/images/icon-contact-qq.png');
                }
            }
        }
        
        .map {
            height: 360px;
            background: url('~assets/images/map.png') no-repeat center;
            background-size: cover;
            position: relative;
            
            @include adaptive(md) {
                & {
                    float: left;
                    width: 65%;
                }
            }
            
            i {
                display: block;
                position: absolute;
                width: 30px;
                height: 37px;
                background: url('~assets/images/pin.png') no-repeat;
                background-size: contain;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    
    &-jobs {
        padding-bottom: 50px;
        
        .header {
            text-align: center;
            font-weight: bold;
            margin-bottom: 1em;
            @include responsive($header-font-size, font-size);
            
            &::before {
                content: '\20';
                display: block;
                width: 30px;
                height: 5px;
                background: url('~assets/images/line-small.png') no-repeat center;
                background-size: cover;
                margin: 0 auto 8px;
            }
        }
        
        .list {
            font-size: 0;
            
            .item {
                display: block;
                padding-top: 30px;
                padding-bottom: 30px;
                border-bottom: 1px solid #e5e5e5;
                
                @include adaptive(sm) {
                    & {
                        width: 50%;
                        height: 235px;
                        display: inline-block;
                        border-left: 1px solid #e5e5e5;
                        padding: 30px 40px;
                        
                        &:nth-child(odd) {
                            border-left: 0;
                        }
                        &:nth-child(7), &:nth-child(8) {
                            border-bottom: 0;
                        }
                    }
                }
                
                @include adaptive(md) {
                    & {
                        width: 25%;
                        height: 320px;
                        
                        &:nth-child(odd) {
                            border-left: 1px solid #e5e5e5;
                        }
                        &:nth-child(1),
                        &:nth-child(5) {
                            border-left: 0;
                        }
                        &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) {
                            border-bottom: 0;
                        }
                    }
                }
                
                .time {
                    color: #999;
                    @include responsive($item-time, font-size);
                }
                
                .title {
                    display: block;
                    font-weight: bold;
                    text-decoration: none;
                    color: #444;
                    @include responsive($item-title, font-size);
                    
                    &::after {
                        content: '\20';
                        display: block;
                        width: 20px;
                        height: 3px;
                        background: url('~assets/images/line-small.png') no-repeat center;
                        background-size: cover;
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }
                }
                
                .intro {
                    color: #444;
                    font-weight: bold;
                    line-height: 2;
                    margin-bottom: 2em;
                    @include responsive($item-intro, font-size);
                }
                
                .more {
                    line-height: 1;
                    color: #999;
                    text-decoration: none;
                    font-size: 14px;
                    background: url('~assets/images/arrow-more.png') no-repeat right 10px;
                    background-size: auto 5px;
                    padding-right: 22px;
                }
            }
        }
    }
}